


SCM 





gulp 中 文 文档 


目录 


gulp 中 文 文档 

入 门 指南 

gulp API 文档 

编写 插件 
指导 
使 用 buffer 
使 用 Stream 处 理 
测试 

FAQ 

gulp 技巧 集 
整合 streams 来 处 理 错误 
删除 文件 和 文件 夹 
使 用 watchify 加 速 browserify 编译 
增 量 编译 打包 ， 包 括 处 理 整 所 涉及 的 所 有 文件 
将 buffer $A stream (内 存 中 的 内 容 ) 
在 gulp 中 运行 Mocha 测试 
仅仅 传递 更 改过 的 文件 
从 命令 行 传递 参数 
只 重新 编译 被 更 改过 的 文件 
每 个 文件 夹 生成 单独 一 个 文件 
串 行 方式 运行 任务 ， 亦 即 ， 任 务 依赖 
拥有 实时 重 载 (live-reloading) 和 CSS 注入 的 服务 器 
通过 stream 工厂 来 共享 stream 
指定 一 个 新 的 cwd (当前 工作 目录 ) 
分 离 任务 到 多 个 文件 中 
使 用 外 部 配置 文件 
在 一 个 任务 中 使 用 多 个 文件 来 源 
Browserify + Uglify2 和 sourcemaps 
Browserify + Globs 
同时 输出 一 个 压缩 过 和 一 个 未 压缩 版 本 的 文件 
改变 版 本 号 以 及 创建 一 个 git tag 
Swig 以 及 YAML front-matter 模板 


gulp 7 x x 


gulp 中 文 文档 


来 源 : gulp 中 文 文档 


入 门 指南 - 如 何 开始 使 用 gulp 

API 文档 - EI gulp 的 输入 和 输出 方式 

CLI 文档 - 学 习 如 何 执行 任务 (task) 以 及 如 何 使 用 一 些 编译 工具 

编写 插件 - 所 以 ， 你 已 经 在 写 一 个 gulp d&fF 1 4 ? 去 这 儿 看 一 些 基 本 文档 ， 
并 了 解 下 什么 样 的 事情 不 应 该 做 


常见 问题 


常见 问题 ， 请 查看 FAQ > 


秘籍 


社区 中 对 于 常用 的 一 些 gulp 应 用 场景 已 经 有 了 一 些 现成 的 秘籍 


还 是 有 问题 ? 


到 StackOverflow 发 一 个 带 有 #gulp 标签 的 问题 ， 或 者 在 Freenode 上 的 #gulpjs 
IRC 频道 寻求 帮助 。 
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Getting started with gulp (by @markgdyr) 
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Building With Gulp 

Gulp - The Basics (screencast) 

Get started with gulp (video series) 
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e Optimize your web code with gulp 
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e Web Starter Kit gulpfile 


License 


All the documentation is covered by the CCO license (do whatever you want with it 
- public domain). 


PUBLIC 
DOMAIN 


To the extent possible under law, Fractal has waived all copyright and related or 
neighboring rights to this work. 


入 门 指南 
1. 全 局 安装 gulp : 


$ npm install --global gulp 


2. 作为 项 目的 开发 依赖 (devDependencies) 安装 


$ npm install --save-dev gulp 


3. 在 项 目 根 目录 下 创建 一 个 名 为 gulpfile.js 的 文件 : 


var gulp = require('gulp'); 


gulp.task('default', function() { 
// 将 你 的 默认 的 任务 代码 放 在 这 


默认 的 名 为 default 的 任务 (task) 将 会 被 运行 ， 在 这 里 ， 这 个 任务 并 未 做 任何 事 
情 o 


想 要 单独 执行 特定 的 任务 (task) ， 请 输入 

gulp &lt;task&gt; &lt;othertask&gt; ° 

下 一 步 做 什么 呢 ? 

你 已 经 安装 了 所 有 必要 的 东西 ， 并 且 拥有 了 一 个 空 的 gulpfile > EHA JE A 
入 门 TR? 可 以 查看 这 些 秘籍 和 这 个 文章 列表 来 学 习 更 多 的 内 容 。 


.Src, .watch, .dest, CLI 参数 - 我 该 怎么 去 用 这 些 东西 
ye, 7 


要 了 解 API 规范 文档 ， 请 查看 API 文档 . 


可 用 的 插件 


gulp FAAEE E ARR AL ,每 天 都 会 有 新 的 插件 诞生 。 在 主 站 上 可 以 查看 完整 
tr 7 o 
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dnb diii options]) 


输出 (Emits) 符合 所 提供 的 匹配 模式 (glob) 或 者 匹配 模式 的 数组 (array of 
globs) 的 文件 。 o pe 回 一 个 Vinyl files 的 stream 它 可 以 被 piped 到 别 的 插件 中 。 


gulp.src('client/templates/*.jade') 
«pipe(jade()) 
.pipe(minify()) 
.pipe(gulp.dest('build/minified templates')); 


glob 请 参考 node-glob 语法 或 者 ， 你 也 可 以 直接 写 文件 的 路 径 。 


globs 
类 型 : String 或 Array 


所 要 读 取 的 glob 或 者 包含 globs 的 数组 。 


options 

E Object 

通过 glob-stream 所 传递 给 node-glob 的 参数 。 

除了 node-glob 和 glob-stream 所 支持 的 参数 外 ，gulp 增加 了 一 些 额 外 的 选项 参 


options.buffer 

类 型 : Boolean RUE: true 

如 果 该 项 被 设置 为 false ， 那 么 将 会 以 stream 方式 返回 file.contents 而 不 
是 文件 buffer 的 形式 。 这 在 处 理 一 些 大 文件 的 时 候 将 会 很 有 用 。 注 意 : 插件 可 能 并 
不 会 实现 对 stream 的 支持 。 

options.read 


RA: Boolean KI: true 


如 果 该 项 被 设置 为 false ^ A file.contents 会 返回 空 值 (null) ， 也 就 是 
并 不 会 去 读 取 文 件 。 


options.base 
类 型 : String 默认 值 : 将 会 加 在 glob 之 前 (请 看 glob2base) 
je, 请 想像 一 下 在 一 个 路 径 为 client/js/somedir 的 目录 中 ， 有 一 个 文件 叫 


somefile.js 


gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile. j 
.pipe(minify()) 
.pipe(gulp.dest('build')); // €^ 'build/somedir/somefile.js' 


gulp.src('client/js/**/*.js', { base: 'client' }) 
.pipe(minify()) 
.pipe(gulp.dest('build')); // €^ 'build/js/somedir/somefile.js 
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gulp.dest(path[, options]) 


能 被 pipe 进来 ， 并 且 将 会 写 文 件 。 并 且 重 新 输出 (emits) 所 有 数据 ， 因 此 你 可 以 
将 它 pipe 到 多 个 文件 夹 。 如 果菜 文件 夹 不 存在 ， 将 会 自动 创建 它 。 


gulp.src('./client/templates/*.jade') 
.pipe(jade()) 
.pipe(gulp.dest('./build/templates')) 
.pipe(minify()) 
.pipe(gulp.dest('./build/minified templates')); 


文件 被 写 入 的 路 径 是 以 所 给 的 相对 路 径 根 据 所 给 的 目标 目录 计算 而 来 。 类 似 的 ， 相 
对 路 径 也 可 以 根据 所 给 的 base 来 计算 。 请 查看 上 述 的 gulp.src 来 了 解 更 多 信 


AX 


类 型 : String or Function 


文件 将 被 写 入 的 路 径 (输出 目录 ) 。 也 可 以 传 入 一 个 函数 ， 在 函数 中 返回 相应 路 
径 ， 这 个 函数 也 可 以 由 vinyl 文件 实例 来 提供 。 


options 


类 型 : Object 


options.cwd 


类 型 : String 默认 值 : process.cwd() 


输出 目录 的 cwd 参数 ， 只 在 所 给 的 输出 目录 是 相对 路 径 时 候 有 效 。 


options.mode 


类 型 : String 默认 值 : 0777 


八进制 权限 字符 ， 用 以 定义 所 有 在 输出 目录 中 所 创建 的 目录 的 权限 。 


gulp.task(name[, deps], fn) 


定义 一 个 使 用 Orchestrator 实现 的 任务 (task) < 


gulp.task('somename', function() { 
// 做 一 些 事 
+); 


name 

任务 的 名 字 ， 如 果 你 需要 在 命令 行 中 运行 你 的 某 些 任务 ， 那 么 ， 请 不 要 在 名 字 中 使 
用 空格 。 

deps 

类 型 : Array 


一 个 包含 任务 列表 的 数组 ， 这 些 任务 会 在 你 当前 任务 运行 之 前 完成 。 


gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { 
// 做 一 些 事 
+); 


sl BB 
注意 : 你 的 任务 是 否 在 这 些 前 置 依赖 的 任务 完成 之 前 运行 了 ?请 一 定 要 确保 你 所 依 


赖 的 任务 列表 中 的 任务 都 使 用 了 正确 的 异步 执行 方式 : 使 用 一 个 callback， 或 者 返 
回 一 个 promise 或 stream ° 


fn 


该 函数 定义 任务 所 要 执行 的 一 些 操作 。 通 常 来 说 ， 它 会 是 这 种 形 
式 : gulp.src().pipe(someplugin()) ° 


异步 任务 支持 


任务 可 以 异步 执行 ， 如 果 fn 能 做 到 以 下 其 中 一 点 : 


接受 一 个 callback 


// 在 shell 中 执行 一 个 命令 
var exec = require('child process').exec; 
gulp.task('jekyll', function(cb) { 
// 编译 Jekyll 
exec('jekyll build', function(err) { 
if (err) return cb(err); // :&® error 
cb(); // 完成 task 
+); 
3); 


返回 一 个 stream 


gulp.task('somename', function() { 
var stream = gulp.src('client/**/*.js') 
.pipe(minify()) 
.pipe(gulp.dest('build')); 
return stream; 


+); 


返回 一 个 promise 


var Q = require('q'); 


gulp.task('somename', function() { 
var deferred = Q.defer(); 


// 执行 异步 的 操作 
setTimeout(function() { 
deferred.resolve(); 


+. 1); 


return deferred.promise; 


+); 


注意 : 默认 的 ，task 将 以 最 大 的 并 发 数 执行 ， 也 就 是 说 ，gulp 会 一 次 性 运行 所 有 
的 task 并 且 不 做 任何 等 待 。 如 果 你 想 要 创建 一 个 序列 化 的 task 队列 ， 并 以 特定 的 
顺序 执行 ， 你 需要 做 两 件 事 : 


。 给 出 一 个 提示 ， 来 告知 task 什么 时 候 执行 完毕 ， 
。 并 且 再 给 出 一 个 提示 ， 来 告知 一 个 task 依赖 另 一 个 task 的 完成 。 


对 于 这 个 例子 ， 让 我 们 先 假定 你 有 两 个 task » "one" 和 "two"， 并 且 你 希望 它们 按照 
这 个 顺序 执行 : 


4 


1. 在 "one" 中 ， 你 加 入 一 个 提示 ， 来 告知 什么 时 候 它 会 完成 : 可 以 再 完成 时 候 返 
回 一 个 callback， 或 者 返回 一 个 promise 或 stream， 这 样 系统 会 去 等 待 它 完 
Ro 


2. 在 "two" 中 ， 你 需要 添加 一 个 提示 来 告诉 系统 它 需 要 依赖 第 一 个 task 完成 。 


因此 ， 这 个 例子 的 实际 代码 将 会 是 这 样 : 


var gulp = require('gulp'); 


// 返回 一 个 callback， 因 此 系统 可 以 知道 它 什么 时 候 完 成 
gulp.task('one', function(cb) { 

// 做 一 些 事 -- 异步 的 或 者 其 他 的 

cb(err); // 如 果 err 不 是 null 或 undefined， 则 会 停止 执行 ， 且 注意 ， 羡 
+); 


// 定义 一 个 所 依赖 的 task 必须 在 这 个 task 执行 之 前 完成 
gulp.task('two', ['one'], function() { 

// 'one' 完成 后 
3); 


gulp.task('default', ['one', 'two']); 
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gulp.watch(glob [, opts], tasks) 3, gulp.watch(glob [, opts, 
cb]) 


监视 文件 ， 并 且 可 以 在 文件 发 生 改 动 时 候 做 一 些 事情 。 它 总 会 返回 一 个 
EventEmitter 来 发 射 (emit) change 事件 。 


gulp.watch(glob[, opts], tasks) 


glob 


类 型 : String or Array 


一 个 glob 字符 串 ， 或 者 一 个 包含 多 个 glob 字符 串 的 数组 ， 用 来 指定 具体 监控 哪些 
文件 的 变动 。 


opts 
类 型 : Object 


传 给 gaze 的 参数 。 


tasks 


类 型 : Array 


需要 在 文件 变动 后 执行 的 一 个 或 者 多 个 通过 gulp.task() 创建 的 task 的 名 字 ， 


var watcher = gulp.watch('js/**/*.js', ['uglify', 'reload']); 


watcher.on('change', function(event) { 


console.log('File ' + event.path + ' was ' + event.type + ', runt 


+); 


«| = 
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gulp.watch(glob[, opts, cb]) 


glob 


类 型 : String or Array 


一 个 glob 字符 串 ， 或 者 一 个 包含 多 个 glob 字符 串 的 数组 ， 用 来 指定 具体 监控 哪些 


文件 的 变动 。 


opts 

类 型 : Object 

传 给 gaze 的 参数 。 
cb(event) 

类 型 : Function 

每 次 变动 需要 执行 的 callback 。 


gulp.watch('js/**/*.js', function(event) ( 


console.log('File ' + event.path + ' was ' + event.type + ', runr 


+); 


xx 





callback 会 被 传 入 一 个 名 为 event 的 对 象 。 这 个 对 象 描 述 了 所 监控 到 的 变动 : 


event.type 


类 型 : String 


发 生 的 变动 的 类 型 : added , changed 或 者 deleted ° 


event.path 


类 型 : String 


触发 了 该 事件 的 文件 的 路 径 。 
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参数 标记 
gulp 只 有 你 需要 熟知 的 参数 标记 ， 其 他 所 有 的 参数 标记 只 在 一 些 任务 需要 的 时 候 使 
用 o 


e -v A --version 会 显示 全 局 和 项 目 本 地 所 安装 的 gulp 版 本 号 
e --require &lt;module path&gt; 将 会 在 执行 之 前 reqiure 一 个 模块 。 这 
对 于 一 些 语 言 编 译 器 或 者 需要 其 他 应 用 的 情况 来 说 来 说 很 有 用 。 你 可 以 使 用 多 
个 --require 
e --gulpfile &lt;gulpfile path&gt; 手动 指定 一 个 gulpfile 的 路 径 ， 这 在 
你 有 很 多 个 gulpfile 的 时 候 很 有 用 。 这 也 会 将 CWD 设置 到 该 gulpfile 所 在 目录 
--cwd &lt;dir path&gt; 手动 指定 CWD。 定 义 gulpfile 查找 的 位 置 ， 此 
外 ， 所 有 的 相应 的 依赖 (require) 会 从 这 里 开始 计算 相对 路 径 
-T 或 --tasks 会 显示 所 指定 gulpfile 的 task 依赖 树 
--tasks-simple 会 以 纯 文本 的 方式 显示 所 载 入 的 gulpfile 中 的 task 列表 
--color 强制 gulp 和 gulp 插件 显示 颜色 ， 即 便 没 有 颜色 支持 
--no-color 强制 不 显示 颜色 ， 即 便 检 测 到 有 颜色 支持 
--silent 禁止 所 有 的 gulp 日 志 


命令 行 会 在 process.env.INIT_CW 中 记录 它 是 从 哪里 被 运行 的 。 


Task 特定 的 参数 标记 


请 参考 StackOverflow 了 解 如 何 增加 任务 特定 的 参数 标记 。 


Tasks 
Task 可 以 通过 gulp &lt;task&gt; &lt;othertask&gt; 方式 来 执行 。 如 果 只 


运行 gulp 命令 ， 则 会 执行 所 注册 的 名 为 default 的 task， 如 果 没 有 这 个 
task * ABA gulp 会 报错 。 


Zn 1% 35 


你 可 以 在 interpret 找到 所 支持 的 语言 列表 。 如 果 你 想 要 增加 一 个 语言 的 支持 ， 请 在 
这 里 提交 一 个 pull request X issue ° 


编写 插件 


如 果 你 打算 自己 写 一 个 Gulp 插件 ， 为 了 节约 你 的 时 间 ， 你 可 以 先 完整 地 阅读 下 这 
个 文档 。 

e +) ( 必 读 ) 

e 使 用 buffer 
e 
e 


使 用 stream 来 处 理 
测试 


它 要 做 什么 ? 


流 式 处 理 文件 对 象 (Streaming file objects) 
gulp 插件 总 是 返回 一 个 object mode 形式 的 stream 来 做 这 些 事情 : 


1. 接收 vinyl File 3t % 
2. 输出 vinyl File 对 象 


这 通常 被 叫做 transform streams (有 时 候 也 叫做 through streams) » transform 
streams 是 可 读 又 可 写 的 ， 它 会 对 传 给 它 的 对 象 做 一 些 转换 的 操作 © 


修改 文 内 容 
Vinyl 文件 可 以 通过 三 种 不 同形 式 来 访问 文件 内 容 : 


e Streams 

e Buffers 

e Z (null) - 对 于 删除 , 清理 , 等 操作 来 说 ， 会 很 有 用 ， 因 为 这 时 候 内 容 是 不 需要 
处 理 的 。 


有 用 的 资源 


File object 
PluginError 
event-stream 
BufferStream 
gulp-util 


插件 范例 


e sindresorhus' gulp plugins 
e Fractal's gulp plugins 


e gulp-replace 


关于 stream 


如 果 你 不 熟悉 stream， 你 可 以 阅读 这 些 来 
e https://github.com/substack/stream-handbook ( 必 读 ) 
e http://nodejs.org/api/stream.html 


其 他 的 一 些 为 gulp 创建 的 和 使 用 的 ， 但 又 并 非 通过 stream 去 处 理 的 库 ， 在 npm 
上 都 会 被 打上 gulpfriendly 标签 。 


编 
1 


2. 


这 个 指导 实际 上 不 是 必须 的 ， 但 是 我 们 强烈 建议 每 一 个 人 来 遵守 。 因 为 没有 人 
会 喜欢 用 一 个 不 好 的 插件 。 这 个 指导 能 在 某 种 意义 上 确保 你 的 插件 能 很 好 的 适 
应 gulp， 以 此 来 让 你 的 生活 变 得 更 将 轻松 。 

写 插件 > 指导 

. 你 的 插件 不 应 该 去 做 一 些 现 有 node 模块 已 经 能 很 容易 做 到 的 事情 


比如 : 删除 一 个 文件 夹 并 不 需要 做 成 一 个 gulp 插件 ， 在 task 里 使 用 一 个 类 似 
del 这 样 的 插件 即 可 。 
.只 是 为 了 封装 而 封装 一 些 的 东西 进去 ， 这 只 会 增加 很 多 低 质 量 的 插件 到 生态 
中 ， 这 不 符合 gulp 的 期 望 。 
. gulp 插件 都 是 以 文件 为 基础 操作 的 ， 如 果 你 发 现 你 正在 把 一 些 很 复杂 的 操作 塞 
3t stream 中 去 ， 那 么 ， 请 直接 写 一 个 node 模块 就 好 。 
. 一 个 好 的 gulp 插件 例子 像 是 gulp-coffee，coffee-script 模块 并 不 能 直接 和 
vinyl 做 很 好 的 适 配 ， 因 此 ， 才 去 封装 它 来 使 用 相应 的 功能 ， 并 且 将 一 些 比 较 涌 
车 的 操作 抽象 出 来 ， 做 成 更 简单 的 gulp 插件 来 使 用 。 


. 你 的 插件 应 该 只 做 一 件 事 ， 并 且 做 好 。 

. 避免 使 用 配置 选项 ， 使 得 你 的 插件 能 胜任 不 同 场合 的 任务 。 
比如 : 一 个 JS 压缩 插件 不 应 该 有 一 个 加 头 部 的 选项 

. 你 的 插件 不 能 去 做 一 些 其 他 插件 做 的 事 : 

.不 应 该 去 拼接 ， 用 gulp-concat 去 做 


.不 应 该 去 增加 头 部 ， 用 gulp-header 去 做 

.不 应 该 去 增加 尾部 ， 用 gulp-footer 去 做 

.如 果 是 一 个 常用 的 可 选 的 操作 ， 那 么 ， 请 在 文档 中 注 明 你 的 插件 通常 和 其 他 某 
个 插件 一 起 使 用 

. 在 你 的 插件 中 使 用 其 他 的 插件 ， 这 能 大 大 减少 你 的 代码 量 ， 并 保证 生态 系统 的 


.你 的 插件 必须 被 测试 过 
. 测试 一 个 插件 很 简单 ， 你 甚至 不 需要 gulp 就 能 测试 
.参考 其 他 的 插件 是 怎么 做 的 


. 在 package.json 中 增加 一 个 名 为 gulpplugin 的 关键 字 ， 这 可 以 让 它 能 
在 我 们 的 搜索 中 出 现 


.不 要 再 stream 里 面 抛 出 错误 
.你 应 该 以 触发 error 事件 来 代替 


21. a stream 1 HJ > hr ALE stream 时 候 发 现 错误 的 配置 选项 
， 那么 你 应 该 抛 出 它 


22. 错误 需要 加 上 以 你 插件 名 字 作 为 前 级 
23. 比如 : gulp-replace: Cannot do regexp replace on a stream 
24. 使 用 gulp-util 的 PluginError 类 来 完成 它 
25. file.contents 的 类 型 需要 总 是 在 输入 输出 中 保持 一 致 
26. 如 果 file.contents A "E (不 可 读 ) 请 将 他 忽略 ， 并 传 过 去 
27. 如 果 file.contents 是 一 个 stream， 但 是 你 不 支持 ， 那 么 请 触发 一 个 错误 
o 不 要 把 stream 硬 转 成 buffer 来 使 你 的 插件 支持 stream， 这 会 引发 很 严重 
aa kee file 传 到 下 游 去 


29. 使 用 file.clone() 来 复制 一 个 文件 或 者 创建 另 一 个 以 此 为 基础 的 文件 
30. 使 用 我 们 模块 推荐 页 上 列举 的 模块 来 让 你 的 开发 更 加 轻松 
31. 不 要 把 gulp 作为 一 个 依赖 


32. 使 用 gulp 来 测试 你 的 插件 的 工作 流 这 的 确 很 酷 ， 但 请 务必 确保 你 将 它 放 到 
devDependency 中 


33. 在 你 的 插件 中 依赖 gulp， 这 意味 着 安装 你 的 插件 的 用 户 将 会 重新 安装 一 遍 gulp 
以 及 所 有 它 所 依赖 的 东西 。 

34. 没有 任何 理由 说 明 你 需要 将 gulp 写 到 你 的 插件 代码 中 去 ， 如 果 你 发 现 你 必须 
这 么 做 ， 那 么 请 开 一 个 issue， 我 们 会 帮 你 解决 。 


为 什么 这 些 指导 这 么 严格 ? 


gulp 的 目标 是 为 oa 觉得 简单 ， 通 过 提供 一 些 严 格 的 指导 ， 我 们 就 能 提供 一 臻 
并 且 高 质量 的 生态 系统 给 大 家 。 不 过 ， 这 确实 双 Rain ta 
e >» 但 是 也 确保 了 后 面 的 问题 会 更 少 。 


如 果 我 不 遵守 这 些 ， 会 发 生 什么 


npm 对 每 个 人 来 说 是 免费 的 ， 你 可 以 开发 任何 你 想 要 开发 的 东西 出 来 ， 并 且 不 需要 
遵守 这 个 规定 。 我 们 承诺 测试 机 制 将 会 很 快 建立 起 来 ， 并 且 加 入 我 们 的 插件 搜索 

中 。 如 果 你 坚持 不 遵守 插件 导 览 ， 那 么 这 会 反应 在 我 们 的 打分 /排名 系统 上 ， 人 们 都 
会 更 加 喜欢 去 使 用 一 个 "更 加 gulp" 的 插件 。 


一 个 插件 大 概 会 是 怎么 样 的 ? 


// through2 是 一 个 对 node 的 transform streams 简单 封装 
var through = require('through2'); 

var gutil = require('gulp-util'); 

var PluginError = gutil.PluginError; 


// 常量 
const PLUGIN NAME = 'gulp-prefixer'; 


function prefixStream(prefixText) { 
var stream = through(); 
stream.write(prefixText); 
return stream; 


j 


// 插件 级 别 函 数 (处 理 文件 ) 
function gulpPrefixer(prefixText) { 


if (!prefixText) { 
throw new PluginError(PLUGIN NAME, 'Missing prefix text!'); 


prefixText = new Buffer(prefixText); // 预先 分 配 


// 创建 一 个 让 每 个 文件 通过 的 stream 通道 
return through.obj(function(file, enc, cb) { 
if (file.isNull()) { 
// 返回 空 文件 
cb(null, file); 


} 
if (file.isBuffer()) { 


file.contents = Buffer.concat([prefixText, file.contents]); 


j 
if (file.isStream()) { 


file.contents - file.contents.pipe(prefixStream(prefixText)), 


j 
cb(null, file); 
3); 
}; 


// KE (export) 插件 主 函 数 
module.exports = gulpPrefixer; 


二 "| 


使 用 buffer 
这 里 有 些 关 于 如 何 创建 一 个 使 用 buffer 来 处 理 的 插件 的 有 用 信息 。 


编写 插件 > 使 用 buffer 


使 用 buffer 


如 果 你 的 插件 依赖 着 一 个 基于 buffer 处 理 的 库 ， 你 可 能 会 选择 让 你 的 插件 以 buffer 
的 形式 来 处 理 file.contents。 让 我 们 来 实现 一 个 在 文件 头 部 插入 额外 文本 的 插件 : 


var through = require('through2'); 
var gutil = reguire('gulp-util'); 
var PluginError = gutil.PluginError; 


// 常量 
const PLUGIN NAME = 'gulp-prefixer'; 


// 插件 级 别 的 函数 (处理 文件 ) 
function gulpPrefixer(prefixText) { 
if (!prefixText) { 
throw new PluginError(PLUGIN NAME, 'Missing prefix text!'); 
j 


prefixText = new Buffer(prefixText); // 提前 分 配 


// 创建 一 个 stream 通道 ， 以 让 每 个 文件 通过 
var stream = through.obj(function(file, enc, cb) { 
if (file.isStream()) { 
this.emit('error', new PluginError(PLUGIN NAME, 'Streams are 
return cb(); 


j 


if (file.isBuffer()) { 
file.contents - Buffer.concat([prefixText, file.contents]); 
j 


// 确保 文件 进入 下 一 个 gulp 插件 
this.push(file); 


// 告诉 stream 引擎 ， 我 们 已 经 处 理 完了 这 个 文件 
cb(); 
p)? 


// 返回 文件 stream 
return stream; 


+; 


// 寻 出 插件 主 函 数 
module.exports = gulpPrefixer; 


JA - 
上 述 的 插件 可 以 这 样 使 用 : 





var gulp = require('gulp'); 
var gulpPrefixer = require('gulp-prefixer'); 


gulp.src('files/**/*.]js") 
.pipe(gulpPrefixer('prepended string')) 
.pipe(gulp.dest('modified-files')); 


处 理 stream 


不 幸 的 是 ， 当 gulp.src 如 果 是 以 stream 的 形式 ， 而 不 是 buffer， 那 么 ， 上面 的 插 
件 就 会 报错 。 如 果 可 以 ， 你 也 应 该 让 他 支持 stream 形式 。 请 查看 使 用 Stream 处 理 
获取 更 多 信息 。 


一 些 基于 buffer 的 插件 


gulp-coffee 

gulp-svgmin 
gulp-marked 
gulp-svg2ttf 


使 用 Stream 2 E 
极力 推荐 让 你 所 写 的 插件 支持 stream。 这 里 有 一 些 关 于 让 插件 支持 stream 的 
一 些 有 用 信息 。 


请 确保 使 用 处 理 错误 的 最 佳 实践 ， 并 且 加 入 一 行 代码 ， 使 得 gulp 能 在 转换 内 容 
的 期 间 在 捕获 到 第 一 个 错误 时 候 正 确 报 出 错误 。 


编写 插件 > 编写 以 stream 为 基础 的 插件 
使 用 stream 处 理 


让 我 们 来 实现 一 个 用 于 在 文件 头 部 插入 一 些 文本 的 插件 ， 这 个 插件 支持 
file.contents 所 有 可 能 的 形式 。 


var through = require('through2'); 
var gutil = reguire('gulp-util'); 
var PluginError = gutil.PluginError; 


// 常量 
const PLUGIN NAME = 'gulp-prefixer'; 


function prefixStream(prefixText) { 
var stream = through(); 
stream.write(prefixText); 
return stream; 


j 


// FRA BR (处 理 文件 ) 
function gulpPrefixer(prefixText) { 
if (!prefixText) { 
throw new PluginError(PLUGIN NAME, 'Missing prefix text!'); 
j 


prefixText = new Buffer(prefixText); // 预先 分 配 


// 创建 一 个 让 每 个 文件 通过 的 stream 通道 
var stream = through.obj(function(file, enc, cb) { 
if (file.isBuffer()) { 
this.emit('error', new PluginError(PLUGIN NAME, 'Buffers not 
return cb(); 


} 


if (file.isStream()) { 
// 定义 转换 内 容 的 streamer 
var streamer = prefixStream(prefixText); 
// M streamer 中 捕获 错误 ， 并 发 出 一 个 gulps Biz 
streamer.on('error', this.emit.bind(this, 'error')); 
// 开始 转换 
file.contents = file.contents.pipe(streamer ) 


} 


// 确保 文件 进去 下 一 个 插件 
this.push(file); 
// 告诉 stream 转换 工作 完成 
cb(); 

1); 


// 返回 文件 stream 
return stream; 


j 


// KE (export) 插件 的 主 函 数 
module.exports = gulpPrefixer; 


«| = 








上 面 的 插件 可 以 像 这 样 使 用 : 


var gulp = require('gulp'); 
var gulpPrefixer = require('gulp-prefixer'); 


gulp.src('files/**/*.js', { buffer: false }) 


.pipe(gulpPrefixer('prepended string') ) 
.pipe(gulp.dest('modified-files')); 


— 94$ A stream 的 插件 


e gulp-svgicons2svgfont 


M 试 


测试 是 保证 你 的 插件 质量 的 唯一 途径 。 这 能 使 你 的 用 户 有 信心 去 使 用 ， 且 能 证 
你 更 加 轻松 。 


编写 插件 > 测试 


工具 


大 多 数 的 插件 使 用 mocha > should 以 及 event-stream 来 做 测试 。 下 面 的 例子 也 将 
会 使 用 这 些 工 具 。 


测试 插件 的 流 处 理 (streaming) 模式 


var assert = require('assert'); 
var es = require('event-stream'); 
var File = require('vinyl'); 

var prefixer = require('../'); 


describe('gulp-prefixer', function() { 
describe('in streaming mode', function() { 


it('should prepend text', function(done) { 


// 创建 伪 文 件 
var fakeFile = new File({ 
contents: es.readArray(['stream', 'with', 'those', ‘content 


2r 


// 创建 一 个 prefixer i (stream) 
var myPrefixer = prefixer('prependthis'); 


// 将 伪 文 件 写 入 
myPrefixer.write(fakeFile); 


// 等 文件 重新 出 来 

myPrefixer.once('data', function(file) { 
// 确保 它 以 相同 的 方式 出 来 
assert(file.isStream()); 


// 缓存 内 容 来 确保 它 已 经 被 处 理 过 (加 前 缓 内容 ) 
file.contents.pipe(es.wait(function(err, data) { 
// 检查 内 容 
assert.equal(data, 'prependthisstreamwiththosecontents' ) , 
done(); 
3); 
3); 


+); 





测试 插件 的 buffer 模式 


var assert = require('assert'); 
var es = require('event-stream'); 
var File = require('vinyl'); 

var prefixer = require('../'); 


describe('gulp-prefixer', function() { 
describe('in buffer mode', function() ( 


it('should prepend text', function(done) { 


// 创建 伪 文 件 
var fakeFile = new File({ 
contents: new Buffer('abufferwiththiscontent' ) 


2r 


// 创建 一 个 prefixer i (stream) 
var myPrefixer = prefixer('prependthis'); 


// 将 伪 文 件 写 入 
myPrefixer.write(fakeFile); 


// 等 文件 重新 出 来 

myPrefixer.once('data', function(file) { 
// 确保 它 以 相同 的 方式 出 来 
assert(file.isBuffer()); 


// 检查 内 容 
assert.equal(file.contents.toString('utf8'), 'prependthisal 
done(); 


}); 
+); 


+); 
+); 


ÄiKKLKK*ŠC— ecc 


一 些 拥有 高 质量 的 测试 用 例 的 插件 


e gulp-cat 
e gulp-concat 





FAQ 


为 什 用 gulp 而 不 是 ? 


请 先 看 gulp 介绍 幻灯 片 来 大 致 了 解 下 gulp 是 怎么 来 的 。 


7% "gulp" XX "Gulp" ? 


gulp 一 直 都 是 小 写 的 。 除 了 在 gulp 的 logo 中 是 用 大 写 的 。 


去 哪里 可 以 找到 gulp 插件 的 列表 ? 


gulp 插件 总 是 会 包含 gulpplugin 关键 字 。 在 这 搜索 gulp 插件 RA 在 npm & 
看 所 有 插件 。 


我 想 写 一 个 gulp 插件 ， 我 应 该 从 哪里 开始 呢 ? 


请 查看 编写 插件 wiki 页 面 来 阅读 一 些 指 导 以 及 一 些 例子 。 


我 的 插件 将 做 , 它 是 不 是 做 的 太 多 了 2? 


有 可 能 。 可 以 先 自问 下 : 
1. 我 的 播 件 是 否 做 了 一 些 其 他 插件 可 能 需要 做 的 事情 ? 


2. 如 果 是 ， 那 么 那 一 段 功能 应 该 作为 一 个 独立 的 插件 。 查 看 是 否 已 经 有 相应 的 插 
件 存在 了 


3. 我 的 插件 是 否 做 了 两 件 事 ， 两 件 根 据 配 置 的 不 同 而 截然 不 同 的 事情 ? 
4. 如 果 是 ， 那 么 为 了 社区 的 良好 发 展 ， 最 好 是 分 开 为 两 个 插件 发 布 

5. 如 果 两 个 任务 是 不 同 的 ， 但 是 差别 非常 细微 ， 那 实际 上 是 允许 的 
换行 符 在 插件 输出 中 应 该 如 何 表示 ? 


请 总 是 使 用 \n 以 避免 不 同 的 操作 系统 带 来 的 兼容 性 问题 。 


我 可 以 从 哪里 获取 gulp 的 最 新 信息 ? 


gulp 的 更 新 信息 可 以 通过 关注 以 下 的 twitter 来 获取 : 
e @wearefractal 
e @eschoff 
e @gulpjs 

gulp X £j IRC 频道 ? 


有 的 ， 欢 迎 来 Freenode 上 的 #gulpjs 来 交流 。 


gulp 中 文 文档 


gulp 技巧 集 


整合 streams 来 处 理 错误 

删除 文件 和 文件 来 

使 用 watchify 加 速 browserify 编译 
增 量 编译 打包 ， 包 括 处 理 整 所 涉及 的 所 有 文件 
将 buffer 变 为 stream (内 存 中 的 内 容 ) 

在 gulp 中 运行 Mocha 测试 

仅仅 传递 更 改过 的 文件 

从 命令 行 传递 参数 

只 重新 编译 被 更 改过 的 文件 

每 个 文件 夹 生成 单独 一 个 文件 

串 行 方式 运行 任务 

拥有 实时 重 载 (live-reloading) 和 CSS 注入 的 服务 器 
通过 stream 工厂 来 共享 stream 
指定 一 个 新 的 cwd (当前 工作 目录 ) 

分 离 任务 到 多 个 文件 中 

使 用 外 部 配置 文件 

在 一 个 任务 中 使 用 多 个 文件 来 源 

Browserify + Uglify2 和 sourcemaps 
Browserify + Globs 

同时 输出 一 个 压缩 过 和 一 个 未 压缩 版 本 的 文件 
改变 版 本 号 以 及 创建 一 个 git tag 

Swig 以 及 YAML front-matter 模板 


gulp 技巧 集 
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xA streams 来 处 理 错误 


默认 情况 下 ， 在 stream 中 发 生 一 个 错误 的 话 ， 它 会 被 直接 抛 出 ， 除 非 已 经 有 一 个 
时 间 监 听 器 监听 着 error 时 间 。 这 在 处 理 一 个 比较 长 的 管道 操作 的 时 候 会 显得 
比较 棘手 。 


通过 使 用 stream-combiner2， 你 可 以 将 一 系列 的 stream 合并 成 一 个 ， 这 意味 着 ， 
你 只 需要 在 你 的 代码 中 一 个 地 方 添加 监听 器 监听 error 时 间 就 可 以 了 。 


这 里 是 一 个 在 gulpfile 中 使 用 它 的 例子 : 


var combiner = require('stream-combiner2'); 
var uglify = require('gulp-uglify'); 
var gulp = require('gulp'); 


gulp.task('test', function() { 
var combined = combiner .obj([ 
gulp.src('bootstrap/js/*.js'), 
uglify(), 
gulp.dest('public/bootstrap') 


// 任何 在 上 面 的 stream 中 发 生 的 错误 ， 都 不 会 抛 出 ， 


// 而 是 会 被 监听 器 捕获 
combined.on('error', console.error.bind(console) ); 


return combined; 


+); 


删除 文件 和 文件 夹 


你 也 许 会 想 要 在 编译 文件 之 前 删除 一 些 文件 。 由 于 删除 文件 和 文件 内 容 并 没有 太 大 
关系 ， 所 以 ， 我 们 没 必要 去 用 一 个 gulp 插件 。 最 好 的 一 个 选择 就 是 使 用 一 个 原生 
的 node 模块 。 


AA del 模块 支持 多 个 文件 以 及 globbing， 因 此 ， 在 这 个 例子 中 ， 我 们 将 使 用 它 
来 删除 文件 : 


$ npm install --save-dev gulp del 


假想 有 如 下 的 文件 结构 : 


| 一 desktop 


| 一 app.js 
I— deploy.json 
L— index.html 


在 gulpfile 中 ， 我 们 希望 在 运行 我 们 的 编译 任务 之 前 ， 将 mobile 文件 的 内 容 先 
清理 掉 : 
A 


var gulp = reguire('gulp'); 
var del = reguire('del'); 


gulp.task('clean:mobile', function (cb) { 
del([ 
'dist/report.csv', 
// 这 里 我 们 使 用 一 个 通 配 模式 来 匹配 mobile 文件 类 中 的 所 有 东西 
'dist/mobile/**/*', 
// 我 们 不 希望 删 掉 这 个 文件 ， 所 以 我 们 取 反 这 个 匹配 模式 
' Idist/mobile/deploy.json' 
], cb); 
+); 


gulp.task('default', ['clean:mobile']); 


在 管道 中 删除 文件 


你 可 能 需要 在 管道 中 将 一 些 处 理 过 的 文件 删除 掉 。 


我 们 使 用 vinyl-paths 模块 来 简单 地 获取 stream 中 每 个 文件 的 路 径 ， 然 后 传 给 
del 方法 。 


$ npm install --save-dev gulp del vinyl-paths 


假想 有 如 下 的 文件 结构 : 


— tmp 
| | 一 rainbow. js 
| L— unicorn.js 
L— dist 


var gulp = require('gulp'); 

var stripDebug = require('gulp-strip-debug'); // 仅 用 于 本 例 做 演示 
var del = require('del'); 

var vinylPaths = require('vinyl-paths'); 


gulp.task('clean:tmp', function () { 
return gulp.src('tmp/*') 
.pipe(stripDebug()) 
.pipe(gulp.dest('dist')) 
.pipe(vinylPaths(del)); 
3); 


gulp.task('default', ['clean:tmp']); 


只 有 在 已 经 使 用 了 其 他 的 插件 之 后 才 需 要 这 样 做 ， 否 则 ， 请 直接 使 用 gulp.src 
来 代替 。 


使 用 watchify 273% browserify 编译 


当 一 个 browserify 项 目 开 始 变 大 的 时 候 ， 编 译 打包 的 时 间 也 会 慢 慢 变 得 长 起 来 。 虽 
然 开始 的 时 候 可 能 只 需 花 1 秒 ， 然 后 当 你 的 项 目 需要 建立 在 一 些 流行 的 大 型 项 目的 
基础 上 时 ， 它 很 有 可 能 就 变 成 30 t^ T» 


这 就 是 为 什么 substack 写 了 watchify 的 原因 ， 一 个 持续 监视 文件 的 改动 ， 并 且 只 
重新 打包 必要 的 文件 的 peg 打包 工具 。 用 这 种 方法 ， E ~o 能 
会 还 是 会 花 30 秒 ， 但 是 后 续 的 编译 打包 工作 将 一 直 保持 在 
是 一 个 极 大 的 提升 。 


watchify 并 没有 一 个 相应 的 gulp 插件 ， 并 且 也 不 需要 有 : 你 可 以 使 用 vinyl-source- 
stream 来 把 你 的 用 于 打包 的 stream 连接 到 gulp 管道 中 。 





'use strict'; 


var watchify = reguire('watchify'); 

var browserify - require('browserify'); 

var gulp - require('gulp'); 

var source - require('vinyl-source-stream'); 
var buffer - require('vinyl-buffer'); 

var gutil = require('gulp-util'); 

var sourcemaps - require('gulp-sourcemaps'); 
var assign - require('lodash.assign'); 


// 在 这 里 添加 自 定 义 browserify 选项 
var customOpts = ( 
entries: ['./src/index.js'], 
debug: true 
XG 
var opts = assign({}, watchify.args, customOpts); 
var b = watchify(browserify(opts)); 


// 在 这 里 加 入 变换 操作 
// 比如 : b.transform(coffeeify); 


gulp.task('js', bundle); // 这 样 你 就 可 以 运行 “gulp js ”来 编译 文件 了 
b.on('update', bundle); // 当 任 何 依赖 发 生 改 变 的 时 候 ， 运 行 打包 工具 
b.on('log', gutil.log); // 输出 编译 日 志 到 终端 


function bundle() { 
return b.bundle( ) 
// 如 果 有 错误 发 生 ， 记 录 这 些 错误 
.on('error', gutil.log.bind(gutil, 'Browserify Error')) 
.pipe(source('bundle.js')) 
// 可 选项 ， 如 果 你 不 需要 缓存 文件 内 容 ， 就 删除 
.pipe(buffer()) 
// 可 选项 ， 如 果 你 不 需要 sourcemaps， 就 删除 
.pipe(sourcemaps.init({loadMaps: true})) // 从 browserify 文件 载 
// 在 这 里 将 变换 操作 加 入 管道 
.pipe(sourcemaps.write('./')) // 5A .map 文件 
.pipe(gulp.dest('./dist')); 





增 量 编译 打包 ， 包 括 处 理 整 所 涉及 的 所 有 文件 


在 做 增 量 编译 打包 的 时 候 ， 有 一 个 比较 麻烦 的 事情 ， 那 就 是 你 常常 希望 操作 的 是 所 
有 处 理 过 的 文件 ， 而 不 仅仅 是 单个 的 文件 。 举 个 例子 ， 你 想 要 只 对 更 改 的 文件 做 代 
码 lint 操作 ， 以 及 一 些 模块 封装 的 操作 ， 然 后 将 他 们 与 其 他 已 经 lint 过 的 ， 以 及 已 
经 进行 过 模块 封装 的 文件 合并 到 一 起 。 如 果 不 用 到 临时 文件 的 话 ， 这 将 会 非常 困 

难 。 


使 用 gulp-cached 以 及 gulp-remember 来 解决 这 个 问题 。 


var gulp = require('gulp'); 

var header = require('gulp-header'); 

var footer = require('gulp-footer'); 

var concat = require('gulp-concat'); 

var jshint = require('gulp-jshint'); 

var cached = require('gulp-cached' ); 

var remember = require('gulp-remember ' ); 


var scriptsGlob = 'src/**/*.js'; 


gulp.task('scripts', function() { 
return gulp.src(scriptsGlob) 


.pipe(cached('scripts')) // 只 传递 更 改过 的 文件 
.pipe(jshint()) // 对 这 些 更 改过 的 文件 做 一 些 特殊 的 
.pipe(header('(function () (')) // 比如 jshinting ^^^ 
.pipe(footer('})();')) // 增加 一 些 类 似 模 块 封装 的 东西 
.pipe(remember('scripts')) // 把 所 有 的 文件 放 回 stream 
.pipe(concat('app.js')) // 做 一 些 需要 所 有 文件 的 操作 


.pipe(gulp.dest('public/')); 
+); 


gulp.task('watch', function () { 
var watcher = gulp.watch(scriptsGlob, ['scripts']); // 监视 与 scr: 
watcher.on('change', function (event) { 


if (event. type === deleted”) { // 如 果 一 个 文 从 
delete cached.caches.scripts[event.path]; // Qgulp-cache 
remember.forget('scripts', event.path); // gulp-remer 

} 

3); 
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将 buffer 2A stream (A 4 749A 4) 


有 时 候 ， 你 会 需要 这 样 一 个 stream， 它 们 的 内 容 保 存在 一 个 变量 中 ， 而 不 是 在 一 个 
实际 的 文件 中 。 换 言 之 ， 怎 么 不 使 用 gulp.src() 而 创建 一 个 'gulp' stream ° 


我 们 来 举 一 个 例子 ， 我 们 拥有 一 个 包含 js 库 文件 的 目录 ， 以 及 一 个 包含 一 些 模块 的 
不 同 版 本 文件 的 目录 。 编 译 的 目标 是 为 每 个 版 本 创建 一 个 js 文件 ， 其 中 包含 所 有 库 
文件 以 及 相应 版 本 的 模块 文件 拼接 后 的 结果 。 


逻辑 上 我 们 将 把 这 个 拆 分 为 如 下 步骤 : 


e. BOUES 

o 拼接 库 文 件 的 内 容 

© 载 入 不 同 版 本 的 文件 

e. 对 于 每 个 版 本 的 文件 ， 将 其 和 库 文件 的 内 容 拼 接 
e 对 于 每 个 版 本 的 文件 ， 将 结果 输出 到 一 个 文件 


想象 如 下 的 文件 结构 : 


ES 

| HL 
|  E— dee 
L— versions 


I— version.1.js 
L— version.2.js 


你 应 该 要 得 到 这 样 的 结果 : 


L— output 
| 一 version.1.complete.js # lib1.js + lib2.js + version.1.js 
L— version.2.complete.js 4 lib1.js + lib2.js + version.2.js 


一 个 简单 的 模块 化 处 理 方式 将 会 像 下 面 这 样 : 


var gulp = require('gulp'); 

var runSequence = require('run-sequence' ); 
var source = require('vinyl-source-stream' ); 
var vinylBuffer = require('vinyl-buffer'); 
var tap = require('gulp-tap'); 

var concat - require('gulp-concat'); 

var size - require('gulp-size'); 

var path - require('path'); 

var es = require('event-stream'); 


var memory = {}; // 我 们 会 将 assets 保存 到 内 存 中 


// 载 入 内 存 中 文件 内 容 的 任务 
gulp.task('load-lib-files', function() { 
// 从 磁盘 中 读 取 库 文件 
return gulp.src('src/libs/*.js') 
// 将 所 有 库 文 件 拼 接 到 一 起 
.pipe(concat('libs.concat.js')) 
// GEA stream 来 获取 每 个 文件 的 数据 
.pipe(tap(function(file) { 
// 保存 文件 的 内 容 到 内 存 
memory[path.basename(file.path)] = file.contents.toString(); 


, 


+); 


gulp.task('load-versions', function() { 
memory.versions = {}; 
// 从 磁盘 中 读 取 文件 
return gulp.src('src/versions/version.*.js') 
// GEA stream 来 获取 每 个 文件 的 数据 
.pipe( tap(function(file) { 
// # assets 中 保存 文件 的 内 容 
memory.versions[path.basename(file.path)] = file.contents.tosti 
3)); 
3); 


gulp.task('write-versions', function() ( 
// 我 们 将 不 容 版 本 的 文件 的 名 字 保 存 到 一 个 数组 中 
var availableVersions = Object.keys(memory.versions) ; 
// 我 们 创建 一 个 数组 来 保存 所 有 的 stream 的 promise 
var streams = []; 


availableVersions.forEach(function(v) { 
// 以 一 个 假 文件 名 创建 一 个 新 的 stream 
var stream = source('final.' + v); 
// 从 拼接 后 的 文件 中 读 取 数据 
var fileContents = memory['libs.concat.js'] + 
// 增加 版 本 文件 的 数据 
'Nn' + memory.versions[v]; 


streams.push(stream); 


// 将 文件 的 内 容 写 入 stream 
stream.write(fileContents); 


process.nextTick(function() { 
// 在 下 一 次 处 理 循环 中 结束 stream 
stream.end(); 


+); 


stream 

// 转换 原始 数据 到 stream 中 去 ， 到 一 个 vinyl 对 象 /文件 

. pipe(vinylBuffer()) 

//.pipe(tap(function(file) { /* 这 里 可 以 做 一 些 对 文件 内 容 的 处 理 操 作 * 
.pipe(gulp.dest('output')); 


+); 


return es.merge.apply(this, streams); 


+); 


pf 我 们 的 主任 务 
gulp.task('default', function(taskDone) { 
runSequence( 
['load-lib-files', 'load-versions'], // 并 行 载 入 文件 
'write-versions', // 一 旦 所 有 资源 进入 内 存 便 可 以 做 写 入 操作 了 
taskDone // 完成 


/三 三 三 三 三 三 三 全 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 我 们 的 监控 任务 
// 只 在 运行 完 'default' 任务 后 运行 ， 
// 这 样 所 有 的 资源 都 已 经 在 内 存 中 了 
gulp.task('watch', ['default'], function() { 
gulp.watch('./src/libs/*.js', function() { 
runSequence( 
'load-lib-files', // 我 们 只 需要 载 入 更 改过 的 文件 
'write-versions' 
); 
+); 


gulp.watch('./src/versions/*.js', function() { 
runSequence( 
'load-versions',  // 我 们 只 需要 载 入 更 改过 的 文件 
'write-versions' 





在 gulp 中 运行 Mocha 测试 
运行 所 有 的 测试 用 例 


// npm install gulp gulp-mocha 


var gulp = require('gulp'); 
var mocha = require('gulp-mocha' ); 


gulp.task('default', function() { 
return gulp.src(['test/test-*.js'], { read: false }) 
. pàpe(mocha( 1 
reporter: 'spec', 
globals: { 
should: require('should') 


} 
})); 
+); 


在 文件 改动 时 候 运 行 Mocha 测试 用 例 


// npm install gulp gulp-mocha gulp-util 


var gulp = require('gulp'); 
var mocha = require('gulp-mocha' ); 
var gutil = reguire('gulp-util'); 
gulp.task('mocha', function() { 
return gulp.src(['test/*.js'], { read: false }) 
.pipe(mocha(( reporter: 'list' })) 
.on('error', gutil.log); 


+); 


gulp.task('watch-mocha', function() { 
gulp.watch(['lib/**', 'test/**'], i mocha” |]); 


+); 


仅仅 传递 更 改过 的 文件 


默认 情况 下 ， a 


道 。 通 过 使 用 gulp- 
changed 可 以 只 让 更 改过 的 文件 传递 过 这 可 以 大 大 加 快 连续 多 次 


次 的 运行 。 


// npm install --save-dev gulp gulp-changed gulp-jscs gulp-uglify 


var gulp = require('gulp'); 

var changed = require('gulp-changed' ); 
var jscs = require('gulp-jscs'); 

var uglify = require('gulp-uglify'); 


// 我 们 在 这 里 定义 一 些 常量 以 供 使 用 
var SRC = 'src/*.js'; 
var DEST = 'dist'; 


gulp.task('default', function() { 

return gulp.src(SRC) 
// “changed” 任 务 需 要 提前 知道 目标 目录 位 置 
// 才能 找 出 哪些 文件 是 被 修改 过 的 
.pipe(changed(DEST)) 
/ 只 有 被 更 改过 的 文件 才 会 通过 这 里 
.pipe(jscs()) 
.pipe(uglify()) 
.pipe(gulp.dest(DEST)); 


Bp ue] ij 


从 命令 行 传递 参数 


// npm install --save-dev gulp gulp-if gulp-uglify minimist 


var gulp = require('gulp'); 
var gulpif = require('gulp-if'); 
var uglify = require('gulp-uglify'); 


var minimist = require('minimist'); 


var knownOptions = { 

string: 'env', 

default: { env: process.env.NODE_ENV || 'production' } 
H 


var options - minimist(process.argv.slice(2), knownOptions); 


gulp.task('scripts', function() { 
return gulp.src('**/*.]js') 
.pipe(gulpif(options.env === 'production', uglify())) // Raie 4) 
.pipe(gulp.dest('dist')); 





然后 ， 通 过 如 下 命令 运行 gulp : 


$ gulp scripts --env development 


只 重新 编译 被 更 改过 的 文件 
通过 使 用 gulp-watch : 


var gulp require('gulp'); 
var sass require('gulp-sass'); 
var watch = require('gulp-watch'); 


gulp.task('default', function() { 
return gulp.src('sass/*.scss') 
.pipe(watch('sass/*.scss')) 
.pipe(sass()) 
.pipe(gulp.dest('dist')); 
+); 


每 个 文件 夹 生 成 单独 一 个 文件 
如 果 你 有 一 整套 的 文件 目录 ， 并 且 和 希望 执行 相应 的 一 套 任 务 ， 比 如 .… 


/Scripts 
/scripts/jquery/*.js 
/scripts/angularjs/*.js 


.… 然 后 希望 完成 如 下 的 结果 h... 


/scripts 
/scripts/jquery.min.js 
/scripts/angularjs.min.js 


.… 你 将 会 需要 像 下 面 所 示 的 东西 ... 


var fs = require('fs'); 

var path = require('path'); 

var merge = require('merge-stream' ); 
var gulp = require('gulp'); 

var concat = require('gulp-concat'); 
var rename = require('gulp-rename' ); 
var uglify = require('gulp-uglify'); 


var scriptsPath = 'src/scripts'; 


function getFolders(dir) { 
return fs.readdirSync(dir) 
.filter(function(file) { 
return fs.statSync(path.join(dir, file)).isDirectory(); 
+); 
j 


gulp.task('scripts', function() { 
var folders - getFolders(scriptsPath); 


var tasks = folders.map(function(folder) { 
// 拼接 成 foldername.js 
// 写 入 输出 
// 压缩 
// 重 命名 为 folder.min.js 
// 再 一 次 写 入 输出 
return gulp.src(path.join(scriptsPath, folder, '/*.js')) 
.pipe(concat(folder + '.js')) 
.pipe(gulp.dest(scriptsPath)) 
«pipe(uglify()) 
.pipe(rename(folder + '.min.js')) 
.pipe(gulp.dest(scriptsPath)); 
+); 


return merge(tasks); 


+); 


(ENS 


e folders.map -在 每 一 个 文件 夹 中 分 别 执行 一 次 函数 ， 并 且 返 回 蜡 步 stream 
e merge -汇总 stream， 并 且 在 所 有 的 stream 都 完成 后 完成 


串 行 方式 运行 任务 ， 亦 即 ， 任 务 依赖 


默认 情况 下 ， 任 务 会 以 最 大 的 并 发 数 同时 运行 -- 也 就 是 说 ， 它 会 不 做 任何 等 待 地 将 
所 有 的 任务 同时 开 起 来 。 如 果 你 希望 创建 一 个 有 特定 顺序 的 串 行 的 任务 链 ， 你 需要 
做 两 件 事 : 


。 给 它 一 个 提示 ， 用 以 告知 任务 在 什么 时 候 完成 ， 
。 而 后 ， 再 给 一 个 提示 ， 用 以 告知 某 任务 需要 依赖 另 一 个 任务 的 完成 。 


举 个 例子 ， 我 们 假设 你 有 两 个 任务 ，"one" 和 "two"， 并 且 你 明确 的 希望 他 们 就 以 这 
样 的 顺序 运行 : 


1. 在 任务 "one" 中 ， 你 添加 的 一 个 提示 ， 来 告知 何 时 它 会 完成 。 你 可 以 传 入 一 个 
回调 函数 ， 然 后 在 完成 后 执行 回调 函数 ， 也 可 以 通过 返回 一 个 promise 或 者 
stream 来 让 引擎 等 待 它 们 分 别 地 被 解决 掉 。 

2. 在 任务 "two" 中 ， 你 添加 一 个 提示 ， 来 告知 引擎 它 需要 依赖 第 一 个 任务 的 完 
i 


因此 ， 这 个 例子 将 会 是 像 这 样 : 


var gulp = require('gulp'); 


// 传 入 一 个 回调 函数 ， 因 此 引擎 可 以 知道 何 时 它 会 被 完成 
gulp.task('one', function(cb) { 
// 做 一 些 事 -- 蜡 步 的 或 者 其 他 任何 的 事 
cb(err); // 如 果 err 不 是 null 和 undefined， 流 程 会 被 结束 掉 ，'two' 
3); 
// 标注 一 个 依赖 ， 依 赖 的 任务 必须 在 这 个 任务 开始 之 前 被 完成 
gulp.task('two', ['one'], function() { 
// 现在 任务 'one' 已 经 完成 


+); 


gulp.task('default', ['one', 'two']); 
// 也 可 以 这 么 写 :gulp.task('default', ['two']); 


EE dd 


另 一 个 例子 ， 通 过 返回 一 个 stream 来 取代 使 用 回调 函数 的 方法 : 





var gulp = reguire('gulp'); 
var del = require('del'); // rm -rf 


gulp.task('clean', function(cb) { 
del(['output'], cb); 
+); 


gulp.task('templates', ['clean'], function() { 
var stream = gulp.src(['src/templates/*.hbs']) 
// 执行 拼接 ， 压 缩 ， 等 。 
.pipe(gulp.dest('output/templates/')); 
return stream; // 返回 一 个 stream 来 表示 它 已 经 被 完成 


+); 


gulp.task('styles', ['clean'], function() { 
var stream = gulp.src(['src/styles/app.less']) 
// 执行 一 些 代 码 检查 ， 压 缩 ， 等 
.pipe(gulp.dest('output/css/app.css')); 
return stream; 


+); 

gulp.task('build', ['templates', 'styles']); 
// templates 和 styles 将 会 并 行 处 理 

// clean 将 会 保证 在 任 一 个 任务 开始 之 前 完成 

// clean 并 不 会 被 执行 两 次 ， 尽 管 它 被 作为 依赖 调用 了 两 次 


gulp.task('default', ['build']); 


WA LH ER (live-reloading) 和 CSS ZAM AR 
AX 


使 用 BrowserSync 和 gulp > 你 可 以 轻松 地 创建 一 个 开发 服务 器 ， 然 后 同一 个 WiFi 
中 的 任何 设备 都 可 以 方便 地 访问 到 。BrowserSync 同时 集成 了 live-reload 所 以 不 需 
要 另外 做 配置 了 。 


首先 安装 模块 : 


$ npm install --save-dev browser-sync 


然后 ， 考 虑 拥有 如 下 的 目录 结构 .… 


gulpfile.js 
app/ 
styles/ 
main.css 
scripts/ 
main.js 
index.html 


.通过 如 下 的 gulpfile.js ， 你 可 以 轻松 地 将 app BL CT EC eB AE ES 
* ， 并 且 所 有 的 浏览 器 都 会 在 文件 发 生 改 变 之 后 自动 刷新 


var gulp = require('gulp'); 
var browserSync = require('browser-sync'); 
var reload = browserSync.reload; 


ETE SEIS EAE cue 
gulp.task('serve', function() { 
browserSync({ 
server: { 
baseDir: 'app' 
} 
+); 


gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cw 
}); 


E 0000 





在 index.html 中 引入 CSS: 


<html> 
<head> 


<link rel="stylesheet" href="styles/main.css"> 


通过 如 下 命令 启动 服务 ， 并 且 打 开 一 个 浏览 器 ， 访 问 默认 的 URL 
(http://localhost:3000) : 


gulp serve 


+ CSS Tfi 4b 2 25 


一 个 第 见 的 使 用 案例 是 当 CSS 文件 文件 预 处 理 之 后 重 载 它们 。 以 sass 为 例 ， 这 便 
是 你 如 何 指 示 浏 览 器 无 需 刷 新 整个 页 面 而 只 是 重 载 CSS 。 


考虑 有 如 下 的 文件 目录 结构 


gulpfile.js 
app/ 
scss/ 
main.scss 
scripts/ 
main.js 
index.html 


.通过 如 下 的 gulpfile.js ， 你 可 以 轻松 地 监视 scss 目录 中 的 文件 ， 并 且 所 
有 的 浏览 器 都 会 在 文件 发 生 改 变 之 后 自动 刷新 : 


var gulp = require('gulp'); 

var sass = require('gulp-ruby-sass'); 

var browserSync = require('browser-sync'); 
var reload = browserSync.reload; 


gulp.task('sass', function() { 
return sass('scss/styles.scss') 
.pipe(gulp.dest('app/css')) 
.pipe(reload(( stream:true })); 
+); 


// 监视 Sass 文件 的 改动 ， 如 果 发 生变 更 ， 运 行 'sass' 任务 ， 并 且 重 载 文 件 
gulp.task('serve', ['sass'], function() { 
browserSync({ 
server: { 
baseDir: 'app' 
J 
+); 


gulp.watch('app/scss/*.scss', ['sass']); 


+); 


在 index.html 文件 中 引入 预 处 理 后 的 CSS 文件 : 


<html> 
<head> 


<link rel="stylesheet" href="css/main.css"> 
通过 如 下 命令 启动 服务 ， 并 且 打 开 一 个 浏览 器 ， 访 问 默认 的 URL 
(http://localhost:3000) : 


gulp serve 


附注 : 


e 实时 重 载 (Live reload) > CSS 注入 以 及 同步 滚动 可 以 在 BrowserStack 虚拟 
机 里 无 颖 执行。 

e 设置 tunnel: true 来 使 用 一 个 公开 的 URL 来 访问 你 本 地 的 站 点 (支持 所 有 
BrowserSync 功能 ) 。 


stream ©) 3 X stream 


如 果 你 在 多 个 任务 中 使 用 了 相同 的 插件 ， 你 可 能 发 现 你 很 想 把 这 些 东 西 以 DRY 的 
原则 去 处 理 。 这 个 方法 可 以 创建 一 些 工 厂 来 把 你 经 常 使 用 的 stream 链 分 离 出 来 。 


我 们 将 使 用 lazypipe 来 完成 这 件 事 。 
这 是 我 们 的 例子 : 


Var 
Var 
Var 
Var 
Var 


gulp = require('gulp'); 


uglify = require('gulp-uglify'); 
coffee = reguire('gulp-coffee'); 
jshint = require('gulp-jshint'); 


stylish = require('jshint-stylish'); 


gulp.task('bootstrap', function() { 
return gulp.src('bootstrap/js/*.js') 


+); 


«pipe(jshint()) 
.pipe(jshint.reporter(stylish)) 
.pipe(uglify()) 

«pipe(gulp.dest( 'public/bootstrap')); 


gulp.task('coffee', function() ( 
return gulp.src('lib/js/*.coffee' ) 


+); 


.pipe(coffee()) 

.pipe(jshint()) 
.pipe(jshint.reporter(stylish)) 
«pipe(uglify()) 
.pipe(gulp.dest('public/js')); 


然后 ， 使 用 了 lazypipe 之 后 ， 将 会 是 这 样 : 


var gulp = require('gulp'); 

var uglify = require('gulp-uglify'); 

var coffee = require('gulp-coffee'); 

var jshint = require('gulp-jshint'); 

var stylish = require('jshint-stylish'); 
var lazypipe = require('lazypipe'); 


// BK lazypipe 

var jsTransform - lazypipe() 
.pipe(jshint) 
.pipe(jshint.reporter, stylish) 
.pipe(uglify); 


gulp.task('bootstrap', function() { 
return gulp.src('bootstrap/js/*.js') 
.pipe(jsTransform( ) ) 
.pipe(gulp.dest('public/bootstrap')); 
3); 


gulp.task('coffee', function() ( 
return gulp.src('lib/js/*.coffee' ) 
.pipe(coffee()) 
.pipe(jsTransform( )) 
.pipe(gulp.dest('public/js')); 
3); 


你 可 以 看 到 ， 我 们 把 多 个 任务 中 都 在 使 用 的 管道 (JSHint + Uglify) 分 

离 到 了 一 个 工厂 。 工 厂 可 以 在 任意 多 NES TEM 你 也 可 以 谋 套 这 些 工厂 ， AA 
把 它们 连接 起 来 ， 已 达到 更 好 的 效果 。 分 离 出 每 个 共 Sž 管道 ， 也 可 以 让 你 能 够 集 
中 地 管理 ， 当 你 的 工作 流程 更 改 后 ， 


指定 一 个 新 的 cwd (当前 工作 目录 ) 
在 一 个 多 层 瞪 套 的 项 目 中 ， 这 是 非常 有 用 的 ， 比 如 : 


/project 
/layer1 
/layer2 


你 可 以 使 用 gulp 的 CLI 参数 --cwd . 
在 project/ Hv: 


gulp --cwd layer1 
如 果 你 需要 对 特定 的 匹配 指定 一 个 cwd， 你 可 以 使 用 glob-stream 的 cwd 选项 : 


gulp.src('./some/dir/**/*.js', { cwd: ‘public’ }); 


分 离 任 务 到 多 个 文件 中 
如 果 你 的 gulpfile.js 开始 变 得 很 大 ， 你 可 以 通过 使 用 require-dir 模块 将 任务 
分 离 到 多 个 文件 
想象 如 下 的 文件 结构 : 
gulpfile.js 
tasks/ 
I— dev.js 


I— release.js 
L— test.js 


安装 require-dir 模块 : 


npm install --save-dev require-dir 
在 gulpfile.js 中 增加 如 下 几 行 代码 : 


var requireDir = require('require-dir'); 
var dir = requireDir('./tasks'); 


使 用 外 部 配置 文件 


这 有 很 多 好 处 ， 因 为 它 能 让 任务 更 加 符合 DRY 原则 ， 并 且 config.json 可 以 被 其 他 
的 任务 运行 器 使 用 ， 比 如 grunt ° 


config.json 


"desktop" : { 

SiG. ce 
"dev/desktop/js/**/*.js", 
"!dev/desktop/js/vendor/**" 

], 

"dest" : "build/desktop/js" }, 

"mobile" : { 

PS 81 95:19 
"dev/mobile/js/**/*.js", 
"!dev/mobile/js/vendor/**" 


], 
"dest" : "build/mobile/js" } } 


gulpfile.js 


// npm install --save-dev gulp gulp-uglify 

var gulp - require('gulp'); 

var uglify - require('gulp-uglify'); 

var config - require('./config.json'); 

function doStuff(cfg) < 

return gulp.src(cfg.src) 

«pipe(uglify()) 
.pipe(gulp.dest(cfg.dest)); 


gulp.task('dry', function() 1 
doStuff(config.desktop); 
doStuff(config.mobile); 


+); 


[cp ES 1 ee ees aw 


// npm install --save-dev gulp merge-stream 


var gulp = require('gulp'); 
var merge = require('merge-stream' ); 


gulp.task('test', function() { 
var bootstrap = gulp.src('bootstrap/js/*.js') 
.pipe(gulp.dest('public/bootstrap')); 


var jquery = gulp.src('jquery.cookie/jquery.cookie.js') 
.pipe(gulp.dest('public/jquery')); 


return merge(bootstrap, jquery); 


+); 
gulp.src 会 以 文件 被 添加 的 顺序 来 emit : 


// npm install gulp gulp-concat 


var gulp = require('gulp'); 
var concat = require('gulp-concat'); 


gulp.task('default', function() { 
return gulp.src(['foo/*', 'bar/*']) 
.pipe(concat('result.txt')) 
.pipe(gulp.dest('build')); 
3); 


Browserify + Uglify2 和 sourcemaps 


Browserify 现在 已 经 成 为 了 一 个 不 可 或 缺 的 重要 工具 了 ， 然 后 要 让 它 能 完美 的 和 
gulp 一 起 协作 ， 还 得 需要 做 一 些 封 装 处 理 。 先 面 便 是 一 个 使 用 Browserify 并 且 增 加 
一 个 完整 的 sourcemap 来 对 应 到 单独 的 每 个 源 文 件 。 


同时 请 看 : 组 合 Streams 来 处 理 错 误 范例 来 查看 如 何 处理 你 的 stream 中 
browserify 或 者 uglify 的 错误 。 


'use strict'; 


var browserify - require('browserify'); 

var gulp - require('gulp'); 

var source - require('vinyl-source-stream'); 
var buffer - require('vinyl-buffer'); 

var uglify = require('gulp-uglify'); 

var sourcemaps - require('gulp-sourcemaps'); 
var gutil = reguire('gulp-util'); 


gulp.task('javascript', function () { 
// 在 一 个 基础 的 task 中 创建 一 个 browserify 实例 
var b = browserify({ 
entries: './entry.js', 
debug: true 
3); 


return b.bundle() 
.pipe(source('app.js')) 
.pipe(buffer()) 
.pipe(sourcemaps.init((loadMaps: true))) 

// 在 这 里 将 转换 任务 加 入 管道 

.pipe(uglify()) 

«on('error', gutil.log) 
.pipe(sourcemaps.write('./')) 
.pipe(gulp.dest('./dist/js/')); 

+); 


Browserify + Globs 


Browserify + Uglify2 展示 了 如 何 设置 一 个 基础 的 gulp 任务 来 把 一 个 JavaScript X 
件 以 及 它 的 依赖 打包 ， 并 且 使 用 UglifyJS 压缩 并 且 保 留 source map。 然而 这 还 不 
够 ， 这 里 还 将 会 展示 如 何 使 用 gulp 和 Browserify 将 多 个 文件 打包 到 一 起 。 


同时 请 看 : 组 合 Streams 来 处 理 错误 范例 来 查看 如 何 处 理 你 的 stream 中 
browserify 或 者 uglify 的 错误 。 


'use strict'; 


var browserify - require('browserify'); 

var gulp - require('gulp'); 

var source - require('vinyl-source-stream'); 
var buffer - require('vinyl-buffer'); 

var globby = require('globby'); 

var through - require('through2'); 

var gutil = require('gulp-util'); 

var uglify - require('gulp-uglify'); 

var sourcemaps - require('gulp-sourcemaps'); 
var reactify = require('reactify'); 


gulp.task('javascript', function () ( 
// gulp 和 希望 任务 能 返回 一 个 stream， 因 此 我 们 在 这 里 创建 一 个 
var bundledStream = through(); 


bundledStream 

// 将 输出 的 stream 转化 成 为 一 个 包含 gulp 插件 所 期 许 的 一 些 属性 的 stream 
.pipe(source('app.js')) 
// 剩 下 的 部 分 ， 和 你 往常 缩写 的 一 样 。 
// 这 里 我 们 直接 拷贝 Browserify + Uglify2 范例 的 代码 。 
.pipe(buffer()) 
.pipe(sourcemaps.init((loadMaps: true))) 

// 在 这 里 将 相应 gulp 插件 加 入 管道 

.pipe(uglify() ) 

.on('error', gutil.log) 
.pipe(sourcemaps.write('./')) 
.pipe(gulp.dest('./dist/js/')); 


// "globby" 替换 了 往常 的 "gulp.src" X Browserify 
// 创建 的 可 读 stream» 
globby(['./entries/*.js'], function(err, entries) { 
// 确保 任何 从 globby 发 生 的 错误 都 被 捕获 到 
if (err) { 
bundledStream.emit('error', err); 
return; 


j 


// 创建 Browserify 实例 


var b = browserify({ 
entries: entries, 
debug: true, 
transform: [reactify] 


+); 


// 将 Browserify stream 接 入 到 我 们 之 前 创建 的 stream PÄ 
// 这 里 是 gulp 式 管道 正式 开始 的 地 方 
b.bundle().pipe(bundledStream); 

+); 


// 最 后 ， 我 们 返回 这 个 stream» RH gulp 会 知道 什么 时 候 这 个 任务 会 完成 
return bundledStream; 


+); 
EEE 


同时 输出 一 个 压缩 过 和 一 个 未 压缩 版 本 的 文件 


同时 输出 压缩 过 的 和 未 压缩 版 本 的 文件 可 以 通过 使 用 gulp-rename 然后 pipe 到 
dest 两 次 来 实现 (一 次 是 压缩 之 前 的 ， 一 次 是 压缩 后 的 ) : 


'use strict'; 


var gulp = require('gulp'); 
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglify'); 


var DEST = 'build/'; 


gulp.task('default', function() { 
return gulp.src('foo.js') 

// 这 会 输出 一 个 未 压缩 过 的 版 本 
.pipe(gulp.dest(DEST)) 
// 这 会 输出 一 个 压缩 过 的 并 且 重 命名 未 foo.min.js 的 文件 
.pipe(uglify()) 
.pipe(rename(( extname: '.min.js' })) 
.pipe(gulp.dest(DEST)); 

3); 


改变 版 本 号 以 及 创建 一 个 git tag 


如 果 你 的 项 目 遵循 语义 化 版 本 ， 那 么 ， 把 那些 发 布 新 版 本 的 时 候 需 要 做 的 事情 通过 
自动 化 的 手段 去 完成 将 会 是 个 很 不 错 的 主意 。 下 面 有 一 个 简单 的 范例 展示 了 如 何 改 
变 项 目的 版 本 号 ， 将 更 新 提交 到 git， 以 及 创建 一 个 tag。 


var gulp = require('gulp'); 

var runSequence = require('run-sequence' ); 
var bump = require('gulp-bump'); 

var gutil = reguire('gulp-util'); 

var git = require('gulp-git'); 

var fs = require('fs'); 


gulp.task('bump-version', function () { 

// 注意 : 这 里 我 硬 编 码 了 更 新 类 型 为 'patch'， 但 是 更 好 的 做 法 是 用 

// minimist (https://www.npmjs.com/package/minimist) 通过 检测 一 

// 一 个 'major'， 'minor' 还 是 一 个 'patch'。 

return gulp.src(['./bower.json', './package.json']) 

.pipe(bump({type: "patch"}).on('error', gutil.log)) 
.pipe(gulp.dest('./')); 

3); 


gulp.task('commit-changes', function () { 
return gulp.src('.') 
.pipe(git.commit('[Prerelease] Bumped version number', (args: 


+); 


gulp.task('push-changes', function (cb) { 
git.push('origin', 'master', cb); 


+); 


gulp.task('create-new-tag', function (cb) { 
var version = getPackageJsonVersion(); 
git.tag(version, 'Created Tag for version: ' + version, function 
if (error) { 
return cb(error); 


git.push('origin', 'master', (args: '--tags'}, cb); 


}); 


function getPackageJsonVersion () { 
// 这 里 我 们 直接 解析 json 文件 而 不 是 使 用 require， 这 是 因为 require 会 组 
return JSON.parse(fs.readFileSync('./package.json', 'utf8')).ve 
+ 
3); 


gulp.task('release', function (callback) ( 
runSequence( 
'bump-version', 


'commit-changes', 
'push-changes', 
'create-new-tag', 
function (error) ( 
if (error) ( 
console.log(error.message); 
) else ( 
console.log('RELEASE FINISHED SUCCESSFULLY ' ); 


callback(error); 





Swig 以 及 YAML front-matter 模板 


模板 可 以 使 用 gulp-swig 和 gulp-front-matter 来 设置 : 


page .html 


title: Things to do 
todos: 
- First todo 
- Another todo item 
- A third todo item 
<html> 
<head> 
<title>{{ title }}</title> 
</head> 
<body> 
<hi>{{ title }}</h1> 
<ul>{% for todo in todos %} 
<li>{{ todo }}</li> 
{% endfor %}</ul> 
</body> 
</html> 


gulpfile.js 


var gulp = require('gulp'); 
var swig = require('gulp-swig'); 
var frontMatter = require('gulp-front-matter'); 


gulp.task('compile-page', function() { 
gulp.src('page.html') 
.pipe(frontMatter(( property: 'data' })) 
.pipe(swig()) 
.pipe(gulp.dest('build')); 
3); 


gulp.task('default', ['compile-page']); 


